<template>
  <div class="members-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h2 class="page-title">
            <el-icon class="title-icon"><User /></el-icon>
            成员管理
          </h2>
          <p class="page-description">管理社团成员信息和权限</p>
        </div>
        <div class="header-stats">
          <div class="stat-card">
            <div class="stat-number">{{ total }}</div>
            <div class="stat-label">总成员数</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-container">
      <el-card class="search-card" shadow="never">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="search-form">
          <el-form-item label="社团" prop="clubName">
            <el-input
              v-model="queryParams.clubName"
              placeholder="请输入社团名称"
              clearable
              style="width: 160px"
              @keyup.enter="handleQuery"
              prefix-icon="Search"
            />
          </el-form-item>
          <el-form-item label="用户" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入用户名"
              clearable
              style="width: 160px"
              @keyup.enter="handleQuery"
              prefix-icon="User"
            />
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-select v-model="queryParams.role" placeholder="成员角色" clearable style="width: 150px">
              <el-option
                v-for="dict in member_role"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="成员状态" clearable style="width: 150px">
              <el-option
                v-for="dict in member_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-container">
      <el-card class="action-card" shadow="never">
        <div class="action-bar">
          <div class="action-left">
            <el-button
              type="success"
              icon="Check"
              :disabled="single"
              @click="handleApprove"
              v-hasPermi="['system:members:approve']"
              class="action-btn primary-btn"
            >
              <span>批量审核</span>
            </el-button>
            <el-button
              type="primary"
              icon="Edit"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:members:edit']"
              class="action-btn"
            >
              <span>修改</span>
            </el-button>
            <el-button
              type="danger"
              icon="Delete"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:members:remove']"
              class="action-btn"
            >
              <span>批量删除</span>
            </el-button>
            <el-button
              type="warning"
              icon="Download"
              @click="handleExport"
              v-hasPermi="['system:members:export']"
              class="action-btn"
            >
              <span>导出数据</span>
            </el-button>
          </div>
          <div class="action-right">
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 成员列表 -->
    <div class="table-container">
      <el-card class="table-card" shadow="never">
        <el-table 
          v-loading="loading" 
          :data="membersList" 
          @selection-change="handleSelectionChange"
          class="members-table"
          :header-cell-style="{ background: '#f8f9fa', color: '#606266', fontWeight: '600' }"
        >
          <el-table-column type="selection" width="55" align="center" />
          
          <!-- 成员信息 -->
          <el-table-column label="成员信息" align="left" min-width="200">
            <template #default="scope">
              <div class="member-info">
                <el-avatar 
                  :size="45" 
                  :src="getAvatarUrl(scope.row.avatar || scope.row.userAvatar)" 
                  :alt="scope.row.userName"
                  class="member-avatar"
                >
                  <el-icon><User /></el-icon>
                </el-avatar>
                <div class="member-details">
                  <div class="member-name">{{ scope.row.userName }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          
          <!-- 社团信息 -->
          <el-table-column label="所属社团" align="center" prop="clubName" min-width="120">
            <template #default="scope">
              <div class="club-info">
                <el-tag type="primary" effect="light">{{ scope.row.clubName }}</el-tag>
              </div>
            </template>
          </el-table-column>
          
          <!-- 角色信息 -->
          <el-table-column label="成员角色" align="center" prop="role" min-width="100">
            <template #default="scope">
              <dict-tag :options="member_role" :value="String(scope.row.role)" />
            </template>
          </el-table-column>
          
          <!-- 状态信息 -->
          <el-table-column label="成员状态" align="center" prop="status" min-width="100">
            <template #default="scope">
              <div class="status-info">
                <dict-tag :options="member_status" :value="String(scope.row.status)" />
              </div>
            </template>
          </el-table-column>
          
          <!-- 申请信息 -->
          <el-table-column label="申请信息" align="center" min-width="150">
            <template #default="scope">
              <div class="application-info">
                <div v-if="scope.row.applyReason" class="reason-item">
                  <span class="reason-label">申请理由:</span>
                  <el-tooltip :content="scope.row.applyReason" placement="top">
                    <span class="reason-text">{{ scope.row.applyReason.length > 10 ? scope.row.applyReason.substring(0, 10) + '...' : scope.row.applyReason }}</span>
                  </el-tooltip>
                </div>
                <div v-if="scope.row.rejectReason" class="reason-item rejection">
                  <span class="reason-label">拒绝理由:</span>
                  <el-tooltip :content="scope.row.rejectReason" placement="top">
                    <span class="reason-text">{{ scope.row.rejectReason.length > 10 ? scope.row.rejectReason.substring(0, 10) + '...' : scope.row.rejectReason }}</span>
                  </el-tooltip>
                </div>
              </div>
            </template>
          </el-table-column>
          
          <!-- 时间信息 -->
          <el-table-column label="时间信息" align="center" min-width="180">
            <template #default="scope">
              <div class="time-info">
                <div class="time-item">
                  <el-icon class="time-icon"><Calendar /></el-icon>
                  <span class="time-label">加入:</span>
                  <span class="time-value">{{ parseTime(scope.row.joinDate) }}</span>
                </div>
                <div class="time-item">
                  <el-icon class="time-icon"><Clock /></el-icon>
                  <span class="time-label">创建:</span>
                  <span class="time-value">{{ parseTime(scope.row.createdAt) }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          
          <!-- 操作列 -->
          <el-table-column label="操作" align="center" width="200" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button 
                  v-if="scope.row.status === 0 && scope.row.role != 1"
                  type="success" 
                  size="small" 
                  icon="Check" 
                  @click="handleApprove(scope.row)"
                  class="action-btn-small"
                >通过</el-button>
                <el-button 
                  v-if="scope.row.status === 0 && scope.row.role != 1"
                  type="danger" 
                  size="small" 
                  icon="Close" 
                  @click="handleReject(scope.row)"
                  class="action-btn-small"
                >拒绝</el-button>
                <el-button 
                  type="primary" 
                  size="small" 
                  icon="Edit" 
                  @click="handleUpdate(scope.row)" 
                  v-if="scope.row.role != 0"
                  class="action-btn-small"
                >修改</el-button>
                <el-button 
                  type="warning" 
                  size="small" 
                  icon="Check" 
                  @click="handleApprove(scope.row)" 
                  v-if="scope.row.role != 0"
                  class="action-btn-small"
                >审核</el-button>
                <el-button 
                  type="danger" 
                  size="small" 
                  icon="Delete" 
                  @click="handleDelete(scope.row)" 
                  v-if="scope.row.role != 0"
                  class="action-btn-small"
                >删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 审核对话框 -->
    <el-dialog :title="reviewTitle" v-model="reviewOpen" width="500px" append-to-body>
      <el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="80px">
        <el-form-item label="审核结果" prop="status">
          <el-radio-group v-model="reviewForm.status">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="rejectReason" v-if="reviewForm.status === 3">
          <el-input v-model="reviewForm.rejectReason" type="textarea" placeholder="请输入拒绝原因" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitReview">确 定</el-button>
          <el-button @click="cancelReview">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 添加或修改社团成员关系对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="membersRef" :model="form" :rules="rules" label-width="100px">
        <!-- <el-form-item label="社团ID" prop="clubId">
          <el-input v-model="form.clubId" placeholder="请输入社团ID" />
        </el-form-item> -->
        <!-- <el-form-item label="用户ID" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户ID" />
        </el-form-item> -->
        <el-form-item label="角色" prop="role">
          <el-select v-model="form.role" placeholder="请选择角色" style="width: 100%">
            <el-option
              v-for="dict in member_role"
              :key="dict.value"
              :label="dict.label"
              :value="Number(dict.value)"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="状态" prop="status">
          <el-select 
            v-model="form.status" 
            placeholder="请选择状态" 
            style="width: 100%"
            @change="handleStatusChange"
          >
            <el-option
              v-for="dict in member_status"
              :key="dict.value"
              :label="dict.label"
              :value="Number(dict.value)"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="申请理由" prop="applyReason">
          <el-input v-model="form.applyReason" type="textarea" placeholder="请输入申请理由" />
        </el-form-item>
        <el-form-item 
          label="拒绝理由" 
          prop="rejectReason" 
          v-if="showRejectReason"
        >
          <el-input v-model="form.rejectReason" type="textarea" placeholder="请输入拒绝理由" />
        </el-form-item>
        <el-form-item label="加入日期" prop="joinDate">
          <el-date-picker
            v-model="form.joinDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择加入日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Members">
import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { User, Calendar, Clock } from '@element-plus/icons-vue'
import { listMembers, getMembers, delMembers, addMembers, updateMembers, approveMember, rejectMember } from "@/api/system/members";

const { proxy } = getCurrentInstance();
const { member_role, member_status } = proxy.useDict("member_role", "member_status");

const membersList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const showRejectReason = ref(false); // 控制拒绝理由显示

// 审核相关变量
const reviewTitle = ref("");
const reviewOpen = ref(false);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    clubId: undefined,
    userId: undefined,
    clubName: undefined,
    userName: undefined,
    role: undefined,
    status: undefined
  },
  rules: {
    clubId: [
      { required: true, message: "社团ID不能为空", trigger: "blur" }
    ],
    userId: [
      { required: true, message: "用户ID不能为空", trigger: "blur" }
    ],
    role: [
      { required: true, message: "角色不能为空", trigger: "blur" }
    ],
    status: [
      { required: true, message: "状态不能为空", trigger: "blur" }
    ]
  },
  reviewForm: {
    memberIds: [],
    status: 1,
    rejectReason: ""
  },
  reviewRules: {
    status: [
      { required: true, message: "请选择审核结果", trigger: "change" }
    ],
    rejectReason: [
      { required: true, message: "请输入拒绝原因", trigger: "blur" }
    ]
  }
});

const { queryParams, form, rules, reviewForm, reviewRules } = toRefs(data);

/** 查询社团成员关系列表 */
function getList() {
  loading.value = true;
  listMembers(queryParams.value).then(response => {
    membersList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  form.value = {
    id: undefined,
    clubId: undefined,
    userId: undefined,
    role: undefined,
    status: undefined,
    applyReason: undefined,
    rejectReason: undefined,
    joinDate: undefined
  };
  showRejectReason.value = false;
  proxy.resetForm("membersRef");
}

/** 处理状态变化 */
function handleStatusChange(value) {
  // 仅当状态为拒绝(2)时显示拒绝理由
  showRejectReason.value = value === 3;
  if (value !== 2) {
    form.value.rejectReason = undefined;
  }
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  // 过滤掉没有id的项，确保不会产生null值
  ids.value = selection.filter(item => item && item.id != null).map(item => item.id);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加成员关系";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const id = row.id || ids.value;
  getMembers(id).then(response => {
    form.value = response.data;
    // 确保状态值是数字类型
    if (form.value.status !== undefined) {
      form.value.status = Number(form.value.status);
      showRejectReason.value = form.value.status === 2;
    }
    open.value = true;
    title.value = "修改成员关系";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["membersRef"].validate(valid => {
    if (valid) {
      // 深拷贝表单数据，避免转换影响原始数据
      const submitData = { ...form.value };
      
      // 如果状态不是拒绝状态，清空拒绝理由
      if (submitData.status !== 2) {
        submitData.rejectReason = undefined;
      }
      
      if (submitData.id != null) {
        updateMembers(submitData).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addMembers(submitData).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

// 审核相关方法
/** 批量通过按钮操作 */
function handleApprove(row) {
  console.log(row)
  console.log(ids.value)
  const memberIds = ids.value;
  // 过滤掉null和undefined值
  if (memberIds.length === 0) {
    //proxy.$modal.msgError("请选择要审核的成员");
    //return;
    memberIds[0] = row.id
  }
  reviewForm.value.memberIds = memberIds;
  reviewForm.value.status = 2;
  reviewTitle.value = "审核通过";
  reviewOpen.value = true;
}

/** 批量拒绝按钮操作 */
function handleReject(row) {
  const memberIds = row.id || ids.value;
  // 过滤掉null和undefined值
  if (memberIds.length === 0) {
    proxy.$modal.msgError("请选择要审核的成员");
    return;
  }
  reviewForm.value.memberIds = memberIds;
  reviewForm.value.status = 3;
  reviewTitle.value = "审核拒绝";
  reviewOpen.value = true;
}

/** 提交审核 */
function submitReview() {
  proxy.$refs["reviewFormRef"].validate(valid => {
    if (valid) {
      // 确保memberIds不为空且不包含null值
      if (!reviewForm.value.memberIds || reviewForm.value.memberIds.length === 0) {
        proxy.$modal.msgError("请选择要审核的成员");
        return;
      }
      
      const validIds = reviewForm.value.memberIds.filter(id => id != null);
      if (validIds.length === 0) {
        proxy.$modal.msgError("请选择要审核的成员");
        return;
      }
      
      // 更新memberIds为有效值
      reviewForm.value.memberIds = validIds;
      
      // 调试信息：显示请求数据
      console.log("审核请求数据:", {
        memberIds: reviewForm.value.memberIds,
        status: reviewForm.value.status,
        rejectReason: reviewForm.value.rejectReason
      });
      
      if (reviewForm.value.status === 2) {
        approveMember(reviewForm.value).then(response => {
          proxy.$modal.msgSuccess("审核通过成功");
          reviewOpen.value = false;
          getList();
        }).catch(error => {
          console.error("审核通过失败:", error);
          proxy.$modal.msgError("审核通过失败");
        });
      } else {
        rejectMember(reviewForm.value).then(response => {
          proxy.$modal.msgSuccess("审核拒绝成功");
          reviewOpen.value = false;
          getList();
        }).catch(error => {
          console.error("审核拒绝失败:", error);
          proxy.$modal.msgError("审核拒绝失败");
        });
      }
    }
  });
}

// 取消审核
function cancelReview() {
  reviewOpen.value = false;
  resetReviewForm();
}

// 重置审核表单
function resetReviewForm() {
  reviewForm.value = {
    memberIds: [],
    status: 1,
    rejectReason: ""
  };
  proxy.resetForm("reviewFormRef");
}

/** 删除按钮操作 */
function handleDelete(row) {
  const memberIds = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除成员关系ID为"' + memberIds + '"的数据项？').then(function() {
    return delMembers(memberIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download("system/member/export", {
    ...queryParams.value
  }, `members_${new Date().getTime()}.xlsx`);
}

function getAvatarUrl(avatar) {
  // 如果没有头像，返回空字符串
  if (!avatar || avatar === "" || avatar === null) {
    return '';
  }
  
  // 如果头像URL已经是完整的URL（以http或https开头），直接返回
  if (avatar.startsWith('http://') || avatar.startsWith('https://')) {
    return avatar;
  }
  
  // 使用与user.js相同的逻辑：直接拼接baseURL和头像路径
  return import.meta.env.VITE_APP_BASE_API + avatar;
}

getList();
</script>

<style lang="scss" scoped>
/* 页面整体样式 */
.app-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: auto;
  padding: 20px;
}

/* 页面头部样式 */
.page-header {
  margin-bottom: 24px;
  
  .header-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid transparent;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }
  }
  
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
  }
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .header-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
  }
  
  .header-info {
    h1 {
      margin: 0;
      font-size: 28px;
      font-weight: 700;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    p {
      margin: 4px 0 0 0;
      color: #666;
      font-size: 14px;
    }
  }
  
  .header-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
    
    .stats-icon {
      font-size: 18px;
    }
    
    .stats-text {
      font-size: 16px;
    }
  }
}

/* 搜索区域样式 */
.search-container {
  margin-bottom: 20px;
  
  .search-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid transparent;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }
  }
  
  .search-form {
    padding: 24px;
    
    .el-form-item {
      margin-bottom: 16px;
      
      .el-form-item__label {
        font-weight: 600;
        color: #303133;
      }
    }
    
    .el-input {
      .el-input__wrapper {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        
        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        &.is-focus {
          box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
        }
      }
    }
    
    .el-select {
      width: 100%;
      
      .el-input__wrapper {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        
        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }
  
  .search-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 0 24px 24px;
    
    .el-button {
      border-radius: 8px;
      font-weight: 600;
      padding: 10px 20px;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
  }
}

/* 操作按钮区域样式 */
.action-container {
  margin-bottom: 20px;
  
  .action-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid transparent;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }
  }
  
  .action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
  }
  
  .action-left {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .action-btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 10px 16px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
    
    &.primary-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      
      &:hover {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
      }
    }
    
    span {
      margin-left: 6px;
    }
  }
}

/* 表格容器样式 */
.table-container {
  margin-top: 16px;
}

.table-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid transparent;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 表格样式 */
.members-table {
  border-radius: 8px;
  overflow: hidden;
}

.members-table .el-table__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.members-table .el-table__header th {
  background: transparent !important;
  color: white !important;
  font-weight: 600;
  border: none;
}

.members-table .el-table__body tr:hover {
  background-color: #f8f9ff;
  transform: translateY(-1px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 成员信息样式 */
.member-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.member-avatar {
  border: 3px solid transparent;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.member-avatar:hover {
  border-color: #409eff;
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
}

.member-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-name {
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.member-id {
  font-size: 12px;
  color: #909399;
  background: #f5f7fa;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
}

/* 社团信息样式 */
.club-info {
  padding: 4px 0;
}

.club-info .el-tag {
  font-weight: 500;
  border-radius: 16px;
  padding: 4px 12px;
}

/* 状态信息样式 */
.status-info {
  padding: 4px 0;
}

/* 申请信息样式 */
.application-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}

.reason-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid transparent;
}

.reason-item.rejection {
  border-left-color: #f56c6c;
  background: #fef0f0;
}

.reason-label {
  font-size: 11px;
  color: #909399;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.reason-text {
  font-size: 12px;
  color: #606266;
  line-height: 1.4;
}

/* 时间信息样式 */
.time-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.time-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 12px;
}

.time-icon {
  color: #409eff;
  font-size: 14px;
}

.time-label {
  color: #909399;
  font-weight: 500;
  min-width: 32px;
}

.time-value {
  color: #606266;
  font-weight: 500;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  padding: 4px 0;
}

.action-btn-small {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  min-width: 60px;
}

.action-btn-small:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .member-info {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 2px;
  }
  
  .action-btn-small {
    width: 100%;
    min-width: auto;
  }
}

/* 表格行动画效果 */
.el-table__body tr {
  transition: all 0.3s ease;
}

.el-table__body tr:nth-child(even) {
  background-color: #fafbfc;
}

.el-table__body tr:hover {
  background-color: #f0f9ff !important;
}

/* 选择框样式优化 */
.el-table__body .el-checkbox {
  transform: scale(1.1);
}

.el-table__body .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}
</style>